<template>
  <div>
    <title>
      前端基本操作-Select选择器多选回显方案，针对前端Select选择器列表值被删除回显异常、前端Select选择器性能优化等问题
    </title>

    <div>
      <el-select
          v-model="detail.userIds"
          placeholder="请选择多选"
          @focus="queryOptions"
          @change="handleChange"
          multiple
      >
        <el-option
            v-for="user in userList"
            :key="user.userId"
            :label="user.userNickName"
            :value="user.userId"
            :disabled="user.disabled"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  //这里存放数据
  data() {
    return {
      // 用户列表
      userList: [],
      //   表单详情
      detail: {
        userIds: null,
        userNickNames: null,
      },
    };
  },
  //方法集合
  methods: {
    // 查询后端详情数据
    queryDetail() {
      console.log("queryDetail 输出this.$refs访问子组件或者DOM元素=====================" + JSON.stringify(this.$refs));
      // 后端接口详情数据
      this.detail = {
        userIds: ["6","7"],
        userNickNames: ["福跳墙6","福跳墙7"],
        // 后端详情返回的userIdNameMap
        userIdNameMap: {
          "6": "福跳墙6",
          "7": "福跳墙7",
        }
      };

      // // 方案1 用户下拉框回显，根据 userIds 和 userNickNames 生成 userList
      // this.userList = this.detail.userIds.map((userId, index) => ({
      //   userId,
      //   userNickName: this.detail.userNickNames[index] || '',
      // }));

      // 方案2 使用 Object.entries() 和 map() 转换 userIdNameMap 为 userList
      this.userList = Object.entries(this.detail.userIdNameMap).map(([userId, userNickName]) => ({
        userId,
        userNickName
      }));

    },

    /**
     * Select选择器多选回显方案-方案1：添加禁用项：用户下拉框回显，详情用户不存在，在最新用户列表中添加一个禁用项。
     */
    // focus	当 input 获得焦点时触发	(event: Event)
    // 在新增编辑页，当用户点击下拉框时，查询后端用户列表
    queryOptions() {
      console.log("queryOptions 输出this.$refs访问子组件或者DOM元素=====================" + JSON.stringify(this.$refs));

      // 查询后端接口得到最新用户列表
      const userListNew = [
        {
          userId: "1",
          userNickName: "黄金糕",
        },
        {
          userId: "2",
          userNickName: "双皮奶",
        },
        {
          userId: "3",
          userNickName: "蚵仔煎",
        },
        {
          userId: "4",
          userNickName: "龙须面",
        },
        {
          userId: "5",
          userNickName: "北京烤鸭",
        },
      ];

      // 判断userIdNameMap不为null和undefined
      if (this.detail.userIdNameMap !== null && this.detail.userIdNameMap !== undefined) {
        // 存储需要添加的缺失用户
        const missingUsers = [];
        // // 方案1 遍历 detail.userIds 检查每个 userId 是否存在于 userListNew 中
        // if (this.detail.userIds && this.detail.userIds.length > 0) {
        //   this.detail.userIds.forEach((userId, index) => {
        //     const exists = userListNew.some(user => user.userId === userId);
        //     if (!exists) {
        //       missingUsers.push({
        //         userId,
        //         userNickName: this.detail.userNickNames[index] || '',
        //         disabled: true
        //       });
        //     }
        //   });
        // }

        // 方案2 使用 Object.entries 遍历 userIdNameMap
        Object.entries(this.detail.userIdNameMap).forEach(([userId, userNickName]) => {
          const exists = userListNew.some(user => user.userId === userId);
          if (!exists) {
            missingUsers.push({
              userId,
              userNickName,
              disabled: true
            });
          }
        });
        // 合并最新用户列表和缺失用户列表
        this.userList = [...userListNew, ...missingUsers];
      }
      console.log("queryOptions:" + JSON.stringify(this.userList));
    },

    // change	选中值发生变化时触发	目前的选中值
    handleChange(user) {
      console.log("handleChange 输出this.$refs访问子组件或者DOM元素=====================" + JSON.stringify(this.$refs));
      console.log("handleChange 目前的选中值用户信息" + JSON.stringify(user));
    },
  },

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log("created 输出this.$refs访问子组件或者DOM元素=====================" + JSON.stringify(this.$refs));
    //   查询后端详情数据
    this.queryDetail();
  },

  // 组件挂载完成后执行
  mounted() {
    // 在 JavaScript 代码里就能通过 this.$refs.myInput 访问这个输入框。
    // 不过，$refs 只有在组件渲染完成后才会包含有效的引用。
    console.log("mounted 输出this.$refs访问子组件或者DOM元素=====================" + JSON.stringify(this.$refs));
  }
};
</script>
